<script setup lang="ts">
import { inject } from "vue";

const { span = 1 } = defineProps<{
  label: string | number;
  labelWidth?: string | number;
  labelAlign?: "left" | "center" | "right";

  width?: string;
  colunmWidth?: string;
  span?: number;

  vertical?: boolean;
}>();

// const { basicWidth } = inject("ByDescription");
const fromParent = inject<{
  basicWidth: number;
  labelWidth?: string;
  labelMinWidth?: string;
  labelSuffix?: string;

  align?: "left" | "right" | "center";
  labelAlign?: "left" | "right" | "center";
}>("ByDescription");
</script>

<template>
  <div
    class="flex mt-3"
    :class="{ 'flex-col': vertical }"
    :style="{ width: width ??  fromParent!.basicWidth * span + '%' }"
  >
    <div
      class="flex-none"
      :class="[
        vertical ? 'mb-2' : 'pr-2',
        {
          'text-left': fromParent?.labelAlign == 'left',
          'text-center': fromParent?.labelAlign == 'center',
          'text-right': fromParent?.labelAlign == 'right',
        },
      ]"
      :style="{
        width: labelWidth ?? fromParent?.labelWidth,
        minWidth: fromParent?.labelMinWidth,
      }"
    >
      <span>{{ label }}</span>
      <span>{{ fromParent?.labelSuffix }}</span>
    </div>

    <div
      class="flex-auto text-[#333]"
      :class="{
        'text-left': fromParent?.align == 'left',
        'text-center': fromParent?.align == 'center',
        'text-right': fromParent?.align == 'right',
      }"
    >
      <slot />
    </div>
  </div>
</template>
